<template>
  <view class="warehousing">
    <view class="top-content">
      <!-- 查询 -->
      <view class="search">
        <input
          type="text"
          class="uni-input"
          v-model="orderNumber"
          placeholder="请输入单号"
        />
        <picker
          class="uni-picker"
          @change="bindPickerChange"
          :value="statusIndex"
          range-key="name"
          :range="statusList"
        >
          <view class="picker-box">
            <view class="picker-text">{{
              statusList[statusIndex]?.name || "全部状态"
            }}</view>
            <uni-icons type="down" size="30" class="picker-icon"></uni-icons
          ></view>
        </picker>
        <view class="btn-box">
          <!-- 重置按钮 -->
          <button class="reset-btn" type="default" @click="resetFn">
            重置
          </button>
          <button class="search-btn" type="primary" @click="searchFn">
            查询
          </button>
        </view>
      </view>
      <view class="list-title">
        <view class="list-title-item">单号</view>
        <view class="list-title-item">期限</view>
        <view class="list-title-item progress">进度</view>
        <view class="list-title-item status">状态</view>
        <view class="list-title-item operation">操作</view>
      </view>
    </view>
    <view class="content">
      <scroll-view
        scroll-y="true"
        style="height: 100%"
        @scrolltolower="loadMore"
      >
        <view
          v-for="(item, index) in inventoryList"
          :key="index"
          class="list-item"
        >
          <view class="list-title-item">{{ item.orderNumber }}</view>
          <view class="list-title-item">{{
            timestampToDate(item.scheduledFinishTime)
          }}</view>
          <view class="list-title-item progress">
            {{ item.receiveQuantity }}/{{ item.applyQuantity }}
          </view>
          <view
            class="list-title-item status"
            :class="ORDER_STATUS[item.status]"
          >
            {{ ORDER_TEXT[item.status] }}
          </view>
          <view class="operation list-title-item">
            <button
              class="mini-btn"
              type="primary"
              @click="openOperation(item)"
              size="mini"
            >
              处理
            </button>
          </view>
        </view>
        <view v-if="loading" class="loading">加载中...</view>
        <view v-if="noMoreData" class="no-more-data">暂无多数据了</view>
        <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
          <view class="popup-zzc">
            <view class="popup-content">
              <view
                class="popup-btn"
                v-if="
                  operationTarget.status == 0 &&
                  hasPermission(['inventory:inbound-apply:update'])
                "
                >确认受理</view
              >
              <view
                class="popup-btn"
                v-if="hasPermission(['inventory:inbound-apply:query'])"
                >详情</view
              >
              <view
                class="popup-btn"
                v-if="
                  operationTarget.status == 10 &&
                  hasPermission([
                    'inventory:inbound-apply:split',
                    'inventory:inbound-apply:make-container',
                  ])
                "
                >接收确认</view
              >
              <view
                class="popup-btn"
                v-if="
                  operationTarget.status > 0 &&
                  operationTarget.status < 100 &&
                  hasPermission(['inventory:inbound-apply:update'])
                "
                >质检</view
              >
              <view
                class="popup-btn"
                v-if="
                  operationTarget.status == 0 &&
                  operationTarget.sourceType &&
                  hasPermission(['inventory:inbound-apply:delete'])
                "
                >拒绝</view
              >
              <view
                class="popup-btn delete"
                v-if="
                  operationTarget.status == 0 &&
                  !operationTarget.sourceType &&
                  hasPermission(['inventory:inbound-apply:delete'])
                "
                >删除</view
              >
              <view
                class="popup-btn"
                v-if="
                  operationTarget.status == 20 &&
                  hasPermission(['inventory:inbound-apply:receive-confirm'])
                "
                >接收</view
              >
              <view
                class="popup-btn"
                v-if="
                  operationTarget.status == 20 &&
                  hasPermission(['inventory:inbound-apply:finish'])
                "
                >完成</view
              >
            </view>
            <view class="popup-cancel" @click="closeOperation">取消</view>
          </view>
        </uni-popup>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import tableData from "./tableData.js";
import { getInventoryList } from "@/service/index";
import { timestampToDate, buildGetUrl, hasPermission } from "@/common/utils";
import {
  STORAGE_KEY,
  RESPONSE_CODE,
  ORDER_STATUS,
  ORDER_TEXT,
} from "@/common/constant";
export default {
  data() {
    return {
      hasPermission,
      timestampToDate,
      ORDER_STATUS,
      ORDER_TEXT,
      inventoryList: [],
      loading: false,
      page: 1,
      total: 0,
      noMoreData: false,
      statusList: [
        {
          name: "全部状态",
          code: "",
        },
        {
          name: "待确认",
          code: 0,
        },
        {
          name: "已确认",
          code: 10,
        },
        {
          name: "已准备",
          code: 20,
        },
        {
          name: "已完成",
          code: 100,
        },
        {
          name: "拒绝",
          code: 130,
        },
      ],
      statusIndex: "",
      orderNumber: "",
      status: "",
      operationTarget: null,
    };
  },
  onLoad() {
    this.loadData();
  },
  methods: {
    closeOperation() {
      this.$refs.popup.close();
    },
    openOperation(item) {
      this.operationTarget = item;
      this.$refs.popup.open();
    },
    // 获取状态选择
    bindPickerChange(e) {
      this.statusIndex = e.detail.value;
      this.status = this.statusList[this.statusIndex].code;
      console.log(this.status);
    },
    loadData() {
      // 模拟异步请求数据
      const params = {
        pageNo: this.page,
        pageSize: 20,
        orderNumber: this.orderNumber,
        status: this.status,
      };
      console.log("查询参数对象", params);
      const query = buildGetUrl(params);
      console.log("拼接好的get参数", query);
      getInventoryList(query).then((res) => {
        if (res.code === RESPONSE_CODE.SUCCESS) {
          this.total = res.data.total;
          this.inventoryList.push(...res.data.list);
          console.log("获取列表成功", res);
          this.loading = false;
        } else {
        }
      });
    },
    loadMore() {
      if (this.loading || this.noMoreData) return;
      this.loading = true;
      this.page++;
      // 这里可以调用接口获取更多数据
      if (this.inventoryList.length >= this.total) {
        // 假设只有三页数据
        this.noMoreData = true;
        this.loading = false;
        return;
      }
      this.loadData();
    },
    searchFn() {
      if (this.orderNumber || this.status || this.status === 0) {
        this.page = 1;
        this.inventoryList = [];
        this.noMoreData = false;
        this.loading = false;
        this.loadData();
      }
    },
    resetFn() {
      if (this.orderNumber || this.status || this.status === 0) {
        this.page = 1;
        this.inventoryList = [];
        this.noMoreData = false;
        this.loading = false;
        this.statusIndex = "";
        this.status = "";
        this.orderNumber = "";
        this.loadData();
      }
    },
  },
};
</script>

<style lang="less">
.warehousing {
  .top-content {
    height: 140rpx;
    .search {
      height: 80rpx;
      display: flex;
      // 横向
      flex-direction: row;
      //   两端对齐
      justify-content: space-between;
      align-items: center;
      .uni-input {
        flex: 1;
        height: 60rpx;
        font-size: 28rpx;
        line-height: 80rpx;
        padding-left: 20rpx;
        box-sizing: border-box;
        background: #eeeeee;
        margin-left: 10rpx;
        border-radius: 8rpx;
      }
      .uni-picker {
        flex: 0.7;
        text-align: center;
        .picker-box {
          display: flex;
          flex-direction: row;
          align-items: center;
          .picker-text {
            text-align: right;
            font-size: 28rpx;
            flex: 2;
          }
          .picker-icon {
            text-align: left;
            font-size: 32rpx !important;
            flex: 1;
          }
        }
      }
      .btn-box {
        flex: 0.7;
        display: flex;
        margin-right: 10rpx;
        // 横向
        flex-direction: row;
        .search-btn,
        .reset-btn {
          flex: 1;
          height: 60rpx;
          line-height: 60rpx;
          width: 90rpx;
          font-size: 20rpx;
          padding: 0;
        }
        .search-btn {
          margin-left: 10rpx;
        }
      }
    }
    .list-title {
      display: flex;
      background: #f5f5f5;
      font-size: 14px;
      justify-content: space-between;
      line-height: 60rpx;
      text-align: center;
      .list-title-item {
        flex: 1;
        &.progress,
        &.status {
          flex: 0.5;
        }
      }
      .operation {
        flex: 0.7;
      }
    }
  }
  .content {
    // 修改这里
    height: calc(100vh - 140rpx);
    .loading,
    .no-more-data {
      text-align: center;
      line-height: 80rpx;
      color: #999;
    }
    .list-item {
      display: flex;
      font-size: 12px;
      justify-content: space-between;
      height: 80rpx;
      text-align: center;
      .list-title-item {
        flex: 1;
        line-height: 80rpx;
        overflow: hidden;
        &.progress,
        &.status {
          flex: 0.5;
        }
      }
      // .list-title-item:nth-child(odd) {
      //   background: #f8f8f8;
      // }
      .operation {
        flex: 0.7;
        display: flex;
        justify-content: center;
        align-items: center;
        .mini-btn {
          width: 100rpx;
          font-size: 20rpx;
        }
      }
    }
  }
  .popup-zzc {
    padding: 0 10rpx 10rpx 10rpx;
    .popup-content {
      background: #fff;
      border-radius: 10rpx;
      .popup-btn {
        text-align: center;
        line-height: 80rpx;
        font-size: 28rpx;
        border-bottom: 1px solid #eee;
        &.delete {
          color: #ff0000;
        }
      }
    }
    .popup-cancel {
      background: #fff;
      border-radius: 10rpx;
      line-height: 80rpx;
      text-align: center;
      margin-top: 10rpx;
      font-size: 28rpx;
    }
  }
}
</style>
